<template>
    <div class="commodityWrapper" ontouchstart="event.stopPropagation()" ontouchmove="event.stopPropagation()">
        <div class="wrapper">
            <div v-for="item in clothesUrl" class="clothes"
                :style="{'width': item.width, 'height': item.height,'top': item.top, 'left': item.left}"
                 @touchend="goToShop(item)"
            ></div>
          <div class="coupon-box rotate" @click="clickCoupon()">
            <div class="coupon frame" :style="{'background-image': 'url('+coupon+')'}"></div>
            <div class="cue frame_back" :style="{'background-image': 'url('+cueImg+')'}" @click="goVip()"></div>
          </div>
        </div>
    </div>
</template>

<script>
  import facejie from '../../img/jie/faceJie.png';
  import handjie from '../../img/jie/handJie.png';
  import legjie from '../../img/jie/legJie.png';
  import heartjie from '../../img/jie/heartJie.png';
  import youknowjie from '../../img/jie/youknowJie.png';

  import coupon from '../../img/commodity/coupon.png';
  import novip from '../../img/commodity/novip.png';
  import vip from '../../img/commodity/vip.png';

  export default {
    props: ['resources', 'pageType', 'jieImg'],
    data() {
      return {
        coupon: coupon,
        cue: false,
        cueImg: novip,
        clothesUrl: [
          {
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12420&storeid=544&salesid=&from=nh51225',
          width: '2.24rem',
          height: '2.65rem',
          top: '4.76rem',
          left: '5.03rem',
          name: 'F02W8113',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12463&storeid=544&salesid=&from=nh51225',
          width: '1.83rem',
          height: '3.76rem',
          top: '8.33rem',
          left: '7.84rem',
          name: 'F04W8105',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12223&storeid=544&salesid=&from=nh51225',
          width: '2.55rem',
          height: '2.88rem',
          top: '13.68rem',
          left: '0.76rem',
          name: 'F20W8102',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12238&storeid=544&salesid=&from=nh51225',
            width: '2.55rem',
            height: '2.88rem',
            top: '13.68rem',
          left: '3.68rem',
          name: 'F07W8110',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12312&storeid=544&salesid=&from=nh51225',
          width: '1.92rem',
          height: '2.88rem',
          top: '13.68rem',
          left: '7.26rem',
          name: 'F14W8100',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12306&storeid=544&salesid=&from=nh51225',
          width: '2.55rem',
          height: '2.4rem',
          top: '19rem',
          left: '0.67rem',
          name: 'F14W8113',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=11998&storeid=544&salesid=&from=nh51225',
          width: '2.68rem',
          height: '2.4rem',
          top: '19rem',
          left: '3.68rem',
          name: 'H13W8109',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=11991&storeid=544&salesid=&from=nh51225',
          width: '1.92rem',
          height: '2.4rem',
          top: '19rem',
          left: '7.26rem',
          name: 'H02W8131',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12476&storeid=544&salesid=&from=nh51225',
          width: '2.56rem',
          height: '3.16rem',
          top: '24.5rem',
          left: '1.28rem',
          name: 'F02M8105',
        },{
          url: '//wx.hotwind.net/wxhd/activity/main.do?id=12043&storeid=544&salesid=&from=nh51225',
          width: '2.56rem',
          height: '1.76rem',
          top: '29.61rem',
          left: '1.28rem',
          name: 'H43M8102',
        }
        ],

      }
    },
    mounted() {

    },
    methods: {
      clickCoupon(){
        let self = this;
        if(this.cue === false){
          $.ajax({
            type: 'POST',
            url: '?c=prize_ctrl&m=get_prize',
            dataType: 'json',
            data: {},
            error: function (error) {
              //alert(JSON.stringify(error));
            },
            success: function (response) {
              if (response.err) {
                //alert(response.err.msg);
                //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                //fn.tx(response);
              } else {
                if(response.data && response.data.prize.length > 0){

                  $.ajax({
                    type: 'POST',
                    url: '?c=vip_ctrl&m=vip',
                    dataType: 'json',
                    data: {},
                    error: function (error) {
                      //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                      if (response.err) {
                        //alert(response.err.msg);
                        //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                        //fn.tx(response);
                      } else {
                        //console.log(JSON.parse(response.data).data,JSON.parse(response.data).data.custId,!JSON.parse(response.data).data.custId);
                        if(!JSON.parse(response.data).data.custId){
                          if(CFG.noDev) _czc.push(["_trackEvent",'getCoupon','novip','','','']);
                          self.cueImg = novip;
                          //console.log('非会员');
                        }else{
                          if(CFG.noDev) _czc.push(["_trackEvent",'getCoupon','vip','','','']);
                          self.cueImg = vip;
                          //console.log('会员');
                        }

                       $(".rotate").css("-webkit-transform", "rotateY(180deg)");
                       self.cue = true;
                      }
                      self.loading = false;
                    }
                  });

                }else{

                }
              }
            }
          });

          /*$(".rotate").css("-webkit-transform", "rotateY(180deg)");
          self.cue = true;*/
        }

      },
      goVip(){
        if(this.cueImg === novip) {
          if(CFG.noDev) _czc.push(["_trackEvent",'openVIP','openVIP','','','']);
          //window.location.href = "https://mp.weixin.qq.com/bizmall/activatemembercard?action=preshow&&encrypt_card_id=Pt3L7sMVuBei5qM7VPaUZ6wiwcxcBoLU0DngceDdO%2B8FcNYt7UDaHAA2LGsCeu6U&outer_str=hotwind&biz=MzI5MzQxMTM2Mw%3D%3D#wechat_redirect";
          window.location.href = "https://mp.weixin.qq.com/bizmall/activatemembercard?action=preshow&&encrypt_card_id=%2BzsGTRKYt8ksZYSJn9X0U8Mq1opgRQR5cIvdThMblkOFVm%2B%2BbpwfncfJn%2FfMr77J&outer_str=hotwind&biz=MjM5MjEzNDAyMA%3D%3D#wechat_redirect";
        }
      },
      goToShop(item) {
        window.location = item.url;
      }
    },
    components: {}
  }
</script>
<style lang="less" scoped>
    .commodityWrapper {
        height: 33.93rem;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: repeat-y;
        background-position: bottom;
        z-index: 999;
        .wrapper {
            height: 33.93rem;
            width: 100%;
            background-image: url("../../img/commodity/commodity.png");
            background-size: 100%;
            background-repeat: no-repeat;
            position: absolute;
            top: -0.7rem;
            .clothes{
                position: absolute;
            }
        }

      .coupon-box{
        width: 2.53rem;
        height: 2.61rem;
        position: absolute;
        top: 10.5rem;
        left: 5.3rem;

        div{
          position: absolute;
          width: 2.53rem;
          height: 2.61rem;
          background-size: 100% auto;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }

      .rotate {
        transition: 0.6s;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;

        .frame {
          z-index: 2;
          backface-visibility:hidden;
          -webkit-backface-visibility:hidden;
          -moz-backface-visibility:hidden;
          -ms-backface-visibility:hidden;

        }
        .frame_back {
          transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);
          backface-visibility: hidden;
          -webkit-backface-visibility:hidden;
          -moz-backface-visibility:hidden;
          -ms-backface-visibility:hidden;

        }
      }

    }
</style>
